<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Personal Information Management System</title>
 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style type="text/css">
        .example>ul>li {font-size: 12px; color: green;}
       
        th, td, p, input {
            font:12px Verdana;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
            color: blue;
            background-color: #EEE;
        }
    
    </style>
</head>
 
<body>
 
    <div class="container">
        <div class="header">
            
            <h4>Account Management v1</h4>
        </div>
 
        <div class="jumbotron">
            <h4>Real knowledge is to know the extent of one’s ignorance</h4>
            <p class="lead"></p>
            <p><a class="btn btn-lg btn-success" href="/api/v1/accounts" role="button">Check your accounts</a>
            </p>
        </div>
 
        <div class="row marketing">
            <div class="col-lg-6">
                <div id="HttpMethodTable"></div>
            </div>
 
            <div class="col-lg-6">
 
    <p class="example">
        <h4>例如:</h4>
    <ul>
    <li>GET /api/v1/accounts	帐户列表</li>
    <li>GET /api/v1/accounts/{siteName}	帐户获取</li>
    <li>POST /api/v1/accounts	帐户创建</li>
    <li>PUT /api/v1/accounts/{siteName}	帐户修改</li>
    <li>DELETE /api/v1/accounts/{siteName}	帐户删除</li>
    </ul>    
    </pre>
 
    
            </div>
        </div>
 <br/><hr/>
        <footer class="footer">
            <p>&copy; Walter Fan's Personal Studio 2017</p>
        </footer>
 
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
    function CreateTableFromJSON() {
    
    var myBooks = [
            {
                "方法": "POST",
                "含义": "Create, 创建资源",
                "是否幂等": "N"
            },
            {
                "方法": "GET",
                "含义": "Retrieve 获取或查询资源",
                "是否幂等": "Y"
            },
            {
                "方法": "PUT",
                "含义": "Update 修改全部资源",
                "是否幂等": "Y"
            },
            {
                "方法": "DELETE",
                "含义": "Delete 删除资源",
                "是否幂等": "Y"
            },
            {
                "方法": "HEAD",
                "含义": "类似于 GET, 但是只传输状态行和 HTTP 头",
                "是否幂等": "Y"
            },
            {
                "方法": "OPTION",
                "含义": "描述目标资源的通信选项",
                "是否幂等": "Y"
            },
            {
                "方法": "TRACE",
                "含义": "执行沿目标资源路径的消息环回测试",
                "是否幂等": "Y"
            },
            {
                "方法": "CONNECT",
                "含义": "建立到由给定URI标识的服务器的隧道",
                "是否幂等": "Y"
            }
        ]

        // EXTRACT VALUE FOR HTML HEADER. 
        var col = [];
        for (var i = 0; i < myBooks.length; i++) {
            for (var key in myBooks[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < myBooks.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myBooks[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("HttpMethodTable");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }
    CreateTableFromJSON();
    </script>
</body>
 
</html>

